<template>
    <div v-if="DetailContent">
        <div class="part clear" >
            <p>阵法</p>
            <div class="highlight">
                <div class="highlight-item">2个满级阵法</div>
            </div>
            <ul class="half" v-for="item in DetailContent.tacticals" :key="item.id">
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl[item.type]" alt=""></div>
                    <div class="zfm">
                        <div class="name"><span class="txt">{{item.type}}：</span><span class="val">{{item.level}}级</span> </div>
                        <div class="left-bottom-bar" v-show="item.level<5">
                            <progress-bar :totalScore="parseInt(item.exp_max)" :actualScore="parseInt(item.exp)"> </progress-bar>
                        </div>
                        <div class="level" v-show="item.level==5&&item.exp==item.exp_max"><span class="txt">已达到最大等级</span></div>
                    </div>
                </li >
            </ul>
            
        </div>
        <div class="part clear" >
            <p>修炼技能</p>
            <ul class="half">
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['功法修炼']" alt=""></div>
                    <div class="xlm"><span class="txt">功法修炼：</span><span class="val">{{DetailContent.role_gfxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['物防修炼']" alt=""></div>
                    <div class="xlm"><span class="txt">物防修炼：</span><span class="val">{{DetailContent.role_fwxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['法防修炼']" alt=""></div>
                    <div class="xlm"><span class="txt">法防修炼：</span><span class="val">{{DetailContent.role_ffxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['抗封修炼']" alt=""></div>
                    <div class="xlm"><span class="txt">抗封修炼：</span><span class="val">{{DetailContent.role_kfxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['宠物攻法']" alt=""></div>
                    <div class="xlm"><span class="txt">宠物攻法：</span><span class="val">{{DetailContent.pet_gfxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['宠物物防']" alt=""></div>
                    <div class="xlm"><span class="txt">宠物物防：</span><span class="val">{{DetailContent.pet_fwxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['宠物法防']" alt=""></div>
                    <div class="xlm"><span class="txt">宠物法防：</span><span class="val">{{DetailContent.pet_ffxl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['宠物抗封']" alt=""></div>
                    <div class="xlm"><span class="txt">宠物抗封：</span><span class="val">{{DetailContent.pet_kfxl}}</span></div>
                </li >
                

            </ul>
            
        </div>
        <div class="part clear" >
            <p>帮派技能</p>
            <ul class="half">
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['强身术']" alt=""></div>
                    <div class="xlm"><span class="txt">强身术：</span><span class="val">{{DetailContent.qss}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['冥想']" alt=""></div>
                    <div class="xlm"><span class="txt">冥想：</span><span class="val">{{DetailContent.mx}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['打造技巧']"  alt=""></div>
                    <div class="xlm"><span class="txt">打造技巧：</span><span class="val">{{DetailContent.dz}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['裁缝技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">裁缝技巧：</span><span class="val">{{DetailContent.cf}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['炼金技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">炼金技巧：</span><span class="val">{{DetailContent.lj}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['中药医理']" alt=""></div>
                    <div class="xlm"><span class="txt">中药医理：</span><span class="val">{{DetailContent.zy}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['烹饪技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">烹饪技巧：</span><span class="val">{{DetailContent.pr}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['追捕技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">追捕技巧：</span><span class="val">{{DetailContent.zb}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['逃离技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">逃离技巧：</span><span class="val">{{DetailContent.tl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['熔炼技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">熔炼技巧：</span><span class="val">{{DetailContent.rl}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['制卡技巧']" alt=""></div>
                    <div class="xlm"><span class="txt">制卡技巧：</span><span class="val">{{DetailContent.zk}}</span></div>
                </li >
                <li class="half-content">
                    <div class="pic"><img :src="imgUrl['强壮术']" alt=""></div>
                    <div class="xlm"><span class="txt">强壮术：</span><span class="val">{{DetailContent.qzs}}</span></div>
                </li >
                

            </ul>
            
        </div>
    
    
    

    </div>
</template>


<script>
import axios from "axios";
import progressBar from '@/pages/detail/components/parts/beauty/ProgressBar'
import Pictures from "@/pages/common/Pictures";
export default {
    components:{
    progressBar
  },
  data(){
        return{
            DetailContent:{},
            imgUrl:Pictures.imgUrl
        }
    },
  mounted () {   
    var id =this.$route.query.id   
    axios.get("http://81.68.253.206:8081/page/getSkill?id="+id
    ).then(res=>{
      if(res.data&&res.data.data&&res.data.status){
        this.DetailContent=res.data.data;
      }
    })
    },

}
</script>
<style lang="scss" scoped>

.part{
    position: relative;
    width: 100%;
    padding:rem(10) rem(30) rem(30);
    background-color: #fff;
    margin-bottom: rem(13);
    span{
        font-size: rem(40);
    }

    p{
        height: rem(50);
        line-height: rem(50);
        font-size: rem(40);
        font-weight: 700;;
        margin-left: rem(30);
        margin-bottom: rem(20);
    }
    p::before{
        content: '';
        overflow: hidden;
        position: absolute;
        top: rem(55);
        left: rem(30);
        width: rem(8);
        height: rem(40);
        line-height: rem(40);
        background-color:#e74e4b;
    }
    .half{
        width: 100%;
        position: relative;
        .half-content{
            display: flex;
            width: 50%;
            float: left;
            height: rem(135);
            line-height: rem(135);
            font-size: rem(40);
            margin-top: rem(30);
            .pic{
                width: rem(120);
                height: rem(120);
                img{
                width: rem(120);
                height: rem(120);
                }

            }
            .xlm{
                margin-left: rem(20);
                height: rem(120);
                line-height: rem(120);
                .txt{
                        color: #888;
                    }
            }
            .zfm{
                margin-top: rem(10);
                position: relative;
                flex: 1;
                height: rem(120);

                margin-left: rem(20);
                .name{
                    margin-top: rem(-50);
                    width: 100%;
                    height: rem(60);
                    .txt{
                        color: #888;
                    }
                }
                .level{
                    width: 100%;
                    height: rem(60);
                    .txt{
                        color: #888;
                    }
                }
                .left-bottom-bar{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: rem(60);               
                padding-right: rem(70);
                }
                
            }

        }                
    }
    .small{
        width: 100%;
        .small-content{
            float: left;
            width: rem(150);
            height: rem(150);
            margin: rem(30) rem(37) 0 0;
            .pic{
                position: relative;
                width: rem(150);
                height: rem(150);
                img{
                width: rem(140);
                height: rem(140);
                border: rem(2) solid #888;
                border-radius: rem(15);
                }
                .bd{
                    position: absolute;
                    top: rem(2);
                    left: rem(3);
                    width: rem(90);
                    height: rem(90);
                    background: url(../../../../assets/imgs/bd.png) no-repeat 50% 50%;
                    background-size: auto 100%;
                }
                .num{
                    position: absolute;
                    right: rem(5);
                    bottom: rem(5);
                    width: rem(50);
                    height: rem(40);
                    line-height: rem(40);
                    background-color:#e74e4b;
                    color: #fff;
                    font-size: rem(30);
                    text-align: center;
                    border-radius: rem(15) 0;
                }
            }
        }

    }
      

    
        
    
    }
    .highlight{
    width: 100%;
    height: rem(60);
    line-height: rem(60);
    .highlight-item{
        display: inline-block;
        padding: 0 rem(15);
        font-size: rem(35);
        color: #ee8381;
        border: 1px solid #f7c9c9;
        border-radius: rem(10);
        margin-right: rem(20);
    }
    }

.clear{clear:both;}

</style>